<div class="alarm-list alarm-flex" (window:resize)="onResize()">
    <header class="alarm-main-header">
        <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
      历史报警
    </span>
        <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
      报警统计
    </span>
    </header>
    <section class="alarm-full alarm-main-content" #alarmTable *ngIf="active==0">
        <section class="alarm-main-fault alarm-flex" *ngFor="let alarmCategory of alarmCategoryDatas;let i=index" [ngClass]="{'alarm-hide':!alarmCategory?.isChecked}">
            <section class="alarm-full alarm-table" id="alarm-table">

                <p-dataTable [value]="alarmCategory?.faultTableData" [sortField]="sortFault" [sortOrder]="sortFO" (onSort)="changeFaultSort($event)" [rows]="row" [paginator]="true" [totalRecords]="alarmCategory?.faultLength"
                    >
                    <p-column field="faultCode" header="故障码" [sortable]="true">
                        <ng-template let-col let-data="rowData" pTemplate="body">
                            <span [style.background]="data.faultLevelColor">{{data[col.field]}}</span>
                        </ng-template>
                    </p-column>
                    <p-column field="faultTime" header="开始时间" [sortable]="true">
                      <ng-template let-col let-data="rowData" pTemplate="body">
                          <span  [title]="data[col.field]">{{data[col.field]|date:"MM-dd HH:mm"}}</span>
                      </ng-template>
                  </p-column>
                  <p-column field="faultEndTime" header="结束时间" [sortable]="true">
                      <ng-template let-col let-data="rowData" pTemplate="body">
                          <span [title]="data[col.field]">{{data[col.field]|date:"MM-dd HH:mm"}}</span>
                      </ng-template>
                  </p-column>
                  <p-column field="desc" header="描述" [sortable]="true">
                      <ng-template let-col let-data="rowData" pTemplate="body">
                          <span style="display:inline-block;width:100%;overflow:hidden;padding:0" [title]="data[col.field]">{{data[col.field]}}</span>
                      </ng-template>
                  </p-column>
                 <!--  <p-column field="faultLevelName" header="等级" [sortable]="true"></p-column>          
                  <p-column field="components" header="类别" [sortable]="true"></p-column>  -->
                </p-dataTable>
            </section>

        </section>
    </section>

    <!--报警统计  -->
  <section class="alarm-main-content alarm-full" *ngIf="active==1">
    <section class="alarm-main-fault alarm-flex">
      <section class="alarm-full alarm-table" id="countTable" #countTable *ngFor="let alarmCategory of alarmCategoryDatas; let i=index" [ngClass]="{'alarm-hide':!alarmCategory.isChecked}">
        <p-dataTable [value]="alarmCategory?.faultCounts" [sortField]="sortF" [sortOrder]="sortO" (onSort)="changeSort($event)" [rows]="rowC" [paginator]="true" [totalRecords]="alarmCategory?.faultCountLength"
          >
          <!-- <p-column field="farmName" header="风场"></p-column>
          <p-column field="deviceName" header="风机"></p-column> -->
          <p-column field="faultCode" header="故障码">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span [style.background]="data.faultLevelColor">{{ data[col.field] }}</span>
            </ng-template>
          </p-column>
          
          <p-column field="faultCount" header="报警次数" [sortable]="true"></p-column>
          <p-column field="faultWorkTime" header="持续时间(h)" [sortable]="true"></p-column>
          <p-column field="faultDesc" header="故障描述">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span style="display:inline-block; width:100%; overflow:hidden; padding:0" [title]="data[col.field]">{{data[col.field]}}</span>
            </ng-template>
          </p-column>
        </p-dataTable>
      </section>
    </section>
  </section>
</div>